<template>
  <div id="wangeditor">
      <div ref="editorElem" style="text-align:left"></div>
  </div> 
</template>

<script>
import Editor from 'wangeditor'
import axios from 'axios'
export default {
  name: 'wangeditor',
  data() {
    return {
      editor: null,
      editorContent: ''
    }
  },
  props: ['content','catchData'],    // 接收父组件的方法
  watch: {
    content (newvalue) {
      this.catchData(newvalue)
    }
  },
  methods: {
    init() {
      this.editor = new Editor(this.$refs.editorElem)
      this.editor.customConfig.onchange = (html) => {
        this.editorContent = html
        this.catchData(this.editorContent)  // 把这个html通过catchData的方法传入父组件
      }
      this.editor.customConfig.customUploadImg = (files, insert) =>{
          console.log(files)
          const Fd = new FormData();
          const session_id = this.Cookies.get('session')
          Fd.append('files', files[0])
          Fd.append('session_id',session_id)
          axios.post(this.$imgApi, Fd)
          .then(res => {
              if (res.data.code == 200) {         
                  insert(this.$imgUrl + res.data.data);
                  return
              }
          })
          .catch(() => {

          })
      }
      this.editor.customConfig.uploadImgServer = this.$imgApi
      this.editor.customConfig.uploadFileName = 'files'
      this.editor.customConfig.menus = [          // 菜单配置
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
      ]
                        // 下面是最重要的的方法
      this.editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
           

        },
        success: function (xhr, editor, result) {
                    // 图片上传并返回结果，图片插入成功之后触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
           
        },
        fail: function (xhr, editor, result) {
                    // 图片上传并返回结果，但图片插入错误时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
                    // 图片上传出错时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
                    // 图片上传超时时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

                // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                    // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          let url = Object.values(result.data)      // result.data就是服务器返回的图片名字和链接
          JSON.stringify(url)    // 在这里转成JSON格式
          insertImg(url)
                    // result 必须是一个 JSON 格式字符串！！！否则报错
        }
      }
      this.editor.create()     // 创建富文本实例
      if (!this.content) {
        this.editor.txt.html('')
      }
    },    
  },
  mounted() {
    this.init()
  },
}
</script>